<template>
	<a-modal :visible="visible" @cancel="cacelClick" :bodyStyle="{ paddingTop: '15px' }" :footer="null">
		<div style="font-size: 18px; margin-bottom: 15px">温馨提示</div>
		<div>
			你已经添加了场景音频，是否还需要添加全程音频？
		</div>
		<div style="color: #ff5253;">
			添加两种音频可能会导致声音重复
		</div>
		<div style="text-align: right; margin-top: 20px">
			<a-space>
				<a-button type="primary" ghost style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
					@click="cacelClick">取消</a-button>

				<a-button type="primary" style="border: none; border-radius: 6px"
					@click="handleOk">
					确定
				</a-button>
			</a-space>
		</div>
	</a-modal>
</template>

<script>
	import {
		reactive,
		toRefs
	} from "vue";

	export default {
		name: "ExportMdal",
		components: {},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
		},
		setup(props, context) {
			const state = reactive({
				count: 0,
			});

			const cacelClick = () => {
				context.emit("close", 'cancel');
			};
			
			const handleOk = () => {
				context.emit("close", 'confirm');
			}

			return {
				...toRefs(state),
				cacelClick,
				handleOk
			};
		},
	};
</script>

<style lang="scss" scoped></style>